<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 
</head>
 <script type="text/javascript">
     var jq = jQuery.noConflict();
 </script>
  
 <title>Búsqueda de clientes por nombre</title>
 
</head>
<body>
 <div style="float:left;">
<jsp:include page="/WEB-INF/views/menu.jsp" />
</div>
<div style="float:left;">
<h3>Búsqueda de clientes</h3>
 
<div style="border: 1px solid #ccc; width: 250px;">
Ingrese el nombre del cliente:
 <input id="nombreBusqueda" name="nombreBusqueda" type="text">
 <input id="buscarNombre" type="submit" value="Buscar" onclick="buscar()" />
</div>
<br/>
<fieldset>
        <legend>Listado de clientes</legend>   
  <table id="tablaResultados">
  </table>
</fieldset>

 <span id="noEncontrado"></span>
 
<script type="text/javascript">
 
function buscar() {
 jq(function() {
  jq.post("busquedaPorNombre",
     {nombre: jq("#nombreBusqueda").val()},
      function(listadoClientes){ 
    	 var tabla=document.getElementById("tablaResultados");
		 while(tabla.rows.length>0) {
			 tabla.deleteRow(tabla.rows.length-1);
		 }
    	 if(listadoClientes.length>0){
    		 var header=tabla.createTHead();
    		  var row=header.insertRow(0);
    		  var cellHead1=row.insertCell(0);
    		  var cellHead2=row.insertCell(1);
    		  var cellHead3=row.insertCell(2);
    		  var cellHead4=row.insertCell(3);
    		  var cellHead5=row.insertCell(4);
    		  var cellHead6=row.insertCell(5);
    		  var cellHead7=row.insertCell(6);
    		  cellHead1.innerHTML="Número".bold();
    		  cellHead2.innerHTML="Nombre".bold();
    		  cellHead3.innerHTML="NIF".bold();
    		  cellHead4.innerHTML="Domicilio".bold();
    		  cellHead5.innerHTML="Localidad".bold();
    		  cellHead6.innerHTML="Provincia".bold();
    		  cellHead7.innerHTML="Código Postal".bold();
    		 for(var i=0;i<listadoClientes.length;i++) {
    			 var row=tabla.insertRow(i+1);
    			 row.style.textAlign="center";
    			 var cell1=row.insertCell(0);
        		 var cell2=row.insertCell(1);
        		 var cell3=row.insertCell(2);
        		 var cell4=row.insertCell(3);
        		 var cell5=row.insertCell(4);
        		 var cell6=row.insertCell(5);
        		 var cell7=row.insertCell(6);
        		 cell1.innerHTML=listadoClientes[i].id;
        		 cell2.innerHTML=listadoClientes[i].nombre;
        		 cell3.innerHTML=listadoClientes[i].nif;
        		 cell4.innerHTML=listadoClientes[i].domicilio;
        		 cell5.innerHTML=listadoClientes[i].localidad;
        		 cell6.innerHTML=listadoClientes[i].provincia;
        		 cell7.innerHTML=listadoClientes[i].codigoPostal;
    		 }
     }
    	 else{
    	  var header=tabla.createTHead();
   		  var row=header.insertRow(0);
   		  var cellHead1=row.insertCell(0);
   		  var cellHead2=row.insertCell(1);
   		  var cellHead3=row.insertCell(2);
   		  var cellHead4=row.insertCell(3);
   		  var cellHead5=row.insertCell(4);
   		  var cellHead6=row.insertCell(5);
   		  var cellHead7=row.insertCell(6);
   		  cellHead1.innerHTML="Número".bold();
   		  cellHead2.innerHTML="Nombre".bold();
   		  cellHead3.innerHTML="NIF".bold();
   		  cellHead4.innerHTML="Domicilio".bold();
   		  cellHead5.innerHTML="Localidad".bold();
   		  cellHead6.innerHTML="Provincia".bold();
   		  cellHead7.innerHTML="Código Postal".bold();
    		jq("#noEncontrado").replaceWith('<span id="noEncontrado">'+ 'No se encontraron clientes que cumplan con el criterio requerido'+'</span>');
    		jq("#resultadoNumero").replaceWith('<span id="resultadoNumero"></span>');
    	       jq("#resultadoNombre").replaceWith('<span id="resultadoNombre"></span>');
    	       jq("#resultadoNIF").replaceWith('<span id="resultadoNIF"></span>');
    	       jq("#resultadoDomicilio").replaceWith('<span id="resultadoDomicilio"></span>');
    	       jq("#resultadoLocalidad").replaceWith('<span id="resultadoLocalidad"></span>');
    	       jq("#resultadoProvincia").replaceWith('<span id="resultadoProvincia"></span>');
    	       jq("#resultadoCodigoPostal").replaceWith('<span id="resultadoCodigoPostal"></span>');
    	       jq("#noEncontrado").replaceWith('<span id="noEncontrado">No se encontró ningún cliente con los datos requeridos</span>');
    	 }
     });
 });
}
</script>
</div>
</body>
</html>